<template>
    <div style="border: 1px red solid;">
        <button @click="changeRemark">changeRemark</button> 
        <button @click="changeRemark2">changeRemark2</button> 
        <div>{{ data.rangeObj?.remark }}</div>
        <div>{{ data2.rangeObj?.remark }}</div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue';
import type {ChildData, ChildExpose} from './pc-data'
import {ChildBusiness} from './child-business'

const data = reactive<ChildData>({})

data.rangeObj = {remark: "123"}

const rangeObj2 = {remark: 'abc'}
const data2 = ref<ChildData>({})
data2.value.rangeObj = ref(rangeObj2).value

const dataHandler = new ChildBusiness(data.rangeObj, data2.value.rangeObj, data, data2)
const printMe = () => {
    console.log(`I am child. `)
    dataHandler.print()
}

const changeRemark = ()=>{
    dataHandler.changeRemark(new Date().getTime() + '')
    dataHandler.print()
}

const changeRemark2 = ()=>{
    dataHandler.changeRemark2(new Date().getTime() + '')
    dataHandler.print()
}
defineExpose<ChildExpose>({
    data, printMe, data2
})
</script>